<template>
	<view>
		<u-navbar title="个人信息">

		</u-navbar>
		<view class="list">
			<view class="item">
				<view class="label">
					我的头像
				</view>
				<view class="value">
					<u--image width="106rpx" height="106rpx" shape="circle" :src="$z.imgsrc(user.avatar)"></u--image>
					<view style="width: 14rpx;">

					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="label">
					名称
				</view>
				<view class="value">
					{{user.username}}
					<view style="width: 14rpx;">

					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="label">
					手机号
				</view>
				<view class="value">
					{{user.phone}}
					<view style="width: 14rpx;">

					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="loginoutbtn">
			<u-button text="退出登录" :plain="true" :customStyle="btnstyle" @click="loginout"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnstyle: {
					height: "93rpx",
					fontSize: "32rpx",
					background: "none"
				},
			}
		},
		computed: {
			user() {
				return this.$store.state.user.user
			}
		},
		methods: {
			loginout() {
				this.$store.commit("user/loginout")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		background-color: #fff;
		margin-top: 18rpx;

		// :not(:last-child)
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 24rpx;
			min-height: 95rpx;
			position: relative;
			box-sizing: border-box;

			&:nth-child(n):not(:last-child) {

				&:after {
					content: "";
					position: absolute;
					left: 18rpx;
					right: 18rpx;
					height: 2rpx;
					bottom: 0;
					transform: scaleY(0.5);
					background-color: #E7E7EC;
				}
			}

			.label {
				color: #838589;
				font-size: 28rpx;
			}

			.value {
				color: #181A1E;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				line-height: 1;
			}


		}

		&:nth-child(n) {
			color: #000;
		}

	}

	.loginoutbtn {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		padding: 0 34rpx;
	}
</style>